<template>
  <div class="app-container setting">
    <el-tabs v-model="activeName" @tab-click="handleClick" class="tabs__content_team container-fluid">
      <el-tab-pane label="User" name="User">
        <div class="filter-container">
          <el-input placeholder="Keyword" style="width: 200px;" class="filter-item" clearable @keyup.enter.native="handleFilter"
            v-model="listQuery.keyword" />
          <el-button class="filter-item" type="success" icon="el-icon-search" @click="handleFilter">
            Search
          </el-button>
          <router-link to="/setting/edit" style="float: right;">
            <button type="button" class="el-button el-button--success"><span>Add</span></button>
          </router-link>
        </div>
        <el-table v-loading="listLoading" :data="list.list" element-loading-text="Loading" border fit
          highlight-current-row stripe @sort-change='sort_change'>
          <el-table-column fixed="left" label="Member ID" prop="member" sortable='custom'>
            <template slot-scope="scope">
              {{ scope.row.member }}
            </template>
          </el-table-column>
          <el-table-column label="Name" prop="firstName" sortable="custom">
            <template slot-scope="scope">
              <router-link :to="`/setting/userInfo?member=${scope.row.member}`">
                {{ scope.row.lastName }}
                {{ scope.row.firstName }}
              </router-link>
            </template>
          </el-table-column>
          <el-table-column label="中文名稱" prop="tcName" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.tcName || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="Contact No." prop="contactNo" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.contactNo || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="Email" prop="email" show-overflow-tooltip sortable='custom'>
            <template slot-scope="scope">
              {{ scope.row.email }}
            </template>
          </el-table-column>
          <el-table-column label="User Type" prop="userType" show-overflow-tooltip sortable='custom'>
            <template slot-scope="scope">
              {{ scope.row.userType | userTypeName }}
            </template>
          </el-table-column>
          <el-table-column label="Group" prop="groupName" sortable='custom'>
            <template slot-scope="scope">
              {{ scope.row.groupName  || '-' }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="" width="60">
            <template slot-scope="scope">
              <div style="text-align: center;">
                <router-link :to="`/setting/edit?member=${scope.row.member}&page=${route.path}`">
                  <el-button type="text" size="small">
                    <img src="../../assets/images/edit.svg" class="btn-icon">
                  </el-button>
                </router-link>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!--        <pagination v-show="total>0" layout="prev, pager, next" :total="total" :page.sync="listQuery.page"-->
        <!--                    :limit.sync="listQuery.limit" @pagination="list"/>-->
        <el-pagination layout="sizes, prev, pager, next" :page-size="listQuery.limit" :current-page="listQuery.page"
          :total="list.total" :page-sizes="[25, 50, 100]" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          class="pagination-container" />
      </el-tab-pane>
      <el-tab-pane label="Medical" name="Medical">
        <el-row :gutter="20" class="solid-row">
          <el-col :key='i' v-for="( item, i ) in medical.items" :sm="24" :md="12" :lg="8" :xl="8">
            <h3 class="title">{{ item.title }}</h3>
            <div class="ul-input"><input v-model="item.value" placeholder="Text" class="set-input">
              <button type="button" class="el-button el-button--success" @click="addTypes(medical.belonging, item.typeCode, item.value)"><span>Add</span></button>
            </div>
            <div class="set-table">
              <div :key='ii' v-if="listItem.isDelete !== 1" v-for="(listItem, ii) in item.list" class="set-tr">
                {{ listItem.typeName }}
                <div>
                  <img src="../../assets/images/edit.svg" class="btn-icon" @click="editTypes(listItem.id, listItem.typeName, listItem.typeCode, listItem.belonging,listItem.typeNameTc,item)">
                  <img v-if="listItem.isUse !== 1" src="../../assets/images/del.svg" class="btn-icon" @click="delTypes(listItem.id, listItem.typeName)">
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="Training" name="Training">
        <el-row :gutter="20" class="solid-row">
          <el-col :key='i' v-for="( item, i ) in training.items" :sm="24" :md="12" :lg="8" :xl="8">
            <h3 class="title">{{ item.title }}</h3>
            <div class="ul-input"><input v-model="item.value" placeholder="Text" class="set-input">
              <button type="button" class="el-button el-button--success" @click="addTypes(training.belonging, item.typeCode, item.value)"><span>Add</span></button>
            </div>
            <div class="set-table">
              <div :key='ii' v-if="listItem.isDelete !== 1" v-for="(listItem, ii) in item.list" class="set-tr">
                {{ listItem.typeName }}
                <div>
                  <img src="../../assets/images/edit.svg" class="btn-icon" @click="editTypes(listItem.id, listItem.typeName, listItem.typeCode, listItem.belonging,listItem.typeNameTc,item)">
                  <img v-if="listItem.isUse !== 1" src="../../assets/images/del.svg" class="btn-icon" @click="delTypes(listItem.id, listItem.typeName)">
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="Account" name="Account">
        <!-- <el-tab-pane v-if='false' label="Account" name="Account" > -->
        <template v-if="$route.name!=='RateCardEdit'">
          <div class="filter-container">
            <el-input placeholder="Keyword" style="width: 200px;" class="filter-item" clearable @keyup.enter.native="handleFilter"
              v-model="listQuery.keyword" />
            <el-button class="filter-item" type="success" icon="el-icon-search" @click="handleFilter">
              Search
            </el-button>
            <router-link :to="{name:'RateCardEdit',params:{page:'Account'}}" style="float: right;">
              <button type="button" class="el-button el-button--success"><span>Add</span></button>
            </router-link>
          </div>
          <el-table v-loading="listLoading" :data="list.list" element-loading-text="Loading" border fit
            highlight-current-row stripe @sort-change='sort_change'>
            <!-- <el-table-column fixed="left" label="Member ID" prop="member" sortable='custom'>
               <template slot-scope="scope">
                 {{ scope.row.member }}
               </template>
             </el-table-column> -->
            <el-table-column label="Name" prop="name" sortable="custom">
              <template slot-scope="scope">
                <router-link :to="`/setting/Account/RateCard/edit?id=${scope.row.id}`">
                  {{ scope.row.name || '-'}}

                </router-link>
              </template>
            </el-table-column>
            <el-table-column label="Date Created" prop="cts" sortable="custom">
              <template slot-scope="scope">
                {{ scope.row.cts | dateFormat }}
              </template>
            </el-table-column>
            <el-table-column label="Remark" prop="notes" sortable="custom">
              <template slot-scope="scope">
                {{ scope.row.notes || '-' }}
              </template>
            </el-table-column>
            <el-table-column label="Status" prop="status" show-overflow-tooltip sortable='custom'>
              <template slot-scope="scope">
                {{ scope.row.status }}
              </template>
            </el-table-column>
            <el-table-column prop="_status" show-overflow-tooltip width="140">
              <template slot-scope="scope">
                <el-button @click='toggleStatusFn(scope.row)' :type="scope.row.status!=='SUSPENDED'?'success':'warning'">
                  {{IsNotStatus(scope.row)}}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination layout="sizes, prev, pager, next" :page-size="listQuery.limit" :current-page="listQuery.page"
            :total="list.total" :page-sizes="[25, 50, 100]" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            class="pagination-container" />
        </template>
        <template v-else>
          <RateCardEdit :that='this'></RateCardEdit>
        </template>

      </el-tab-pane>
      <el-tab-pane label="Event" name="Event">
        <el-row :gutter="20" class="solid-row">
          <el-col v-for="( item, i ) in event.items" :key='i' :sm="24" :md="12" :lg="8" :xl="8">
            <h3 class="title">{{ item.title }}</h3>
            <div class="ul-input">
              <div :class="'coll '+ (item.en?'flex-box  lfRiBefore':'')">
              <input  v-model="item.value" placeholder="English Text" class="set-input">
              <input v-if='item.en' v-model="item.enVal" placeholder="中文名" class="set-input">
              </div>
              <button type="button" class="el-button el-button--success" @click="addTypes(event.belonging, item.typeCode, item.value,item.enVal)"><span>Add</span></button>
            </div>
            <div class="set-table">
              <div :key='ii' v-if="listItem.isDelete !== 1" v-for="(listItem, ii) in item.list" class="set-tr">
                {{ listItem.typeName + (listItem.typeNameTc?'('+listItem.typeNameTc+')':'')}}
                <div>
                  <img src="../../assets/images/edit.svg" class="btn-icon" @click="editTypes(listItem.id, listItem.typeName, listItem.typeCode, listItem.belonging, listItem.typeNameTc,item)">
                  <img v-if="listItem.isUse !== 1" src="../../assets/images/del.svg" class="btn-icon" @click="delTypes(listItem.id, listItem.typeName)">
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="Miscellaneous" name="Miscellaneous">
        <el-row :gutter="20" class="solid-row">
          <el-col :key="s" v-for="(item, s) in miscellaneous.items" :sm="24" :md="12" :lg="8" :xl="8">
            <h3 class="title">{{ item.title }}</h3>
            <div class="ul-input">
              <div :class="'coll '+ (item.en?'flex-box  lfRiBefore':'')">
                 <input  v-model="item.value" placeholder="English Text" class="set-input">
                 <input v-if='item.en' v-model="item.enVal" placeholder="中文名" class="set-input">

              </div>
              <button type="button" class="el-button el-button--success" @click="addTypes(miscellaneous.belonging, item.typeCode, item.value, item.enVal)"><span>Add</span></button>
            </div>
            <div class="set-table">
              <div v-if="listItem.isDelete !== 1" :key="ii" v-for="(listItem, ii) in item.list" class="set-tr">
                {{ listItem.typeName + (listItem.typeNameTc?'('+listItem.typeNameTc+')':'')}}
                <div>
                  <img src="../../assets/images/edit.svg" class="btn-icon" @click="editTypes(listItem.id, listItem.typeName, listItem.typeCode, listItem.belonging, listItem.typeNameTc,item)">
                  <img v-if="listItem.isUse !== 1" src="../../assets/images/del.svg" class="btn-icon" @click="delTypes(listItem.id, listItem.typeName)">
                </div>
              </div>
            </div>
          </el-col>
        </el-row>

       <!-- <div v-show='false' ref='inpRef'>
          <el-input type="text" style="margin-bottom: 10px;" autocomplete="off" v-model="confirmModel.value"
            placeholder="中文名" />

          <el-input type="text" autocomplete="off" placeholder="English Text" v-model="confirmModel.enVal" />
        </div> -->
      </el-tab-pane>
    </el-tabs>

        <div tabindex="-1" role="dialog" aria-modal="true" v-if='confirmModel.hide' aria-label="dialog" class="el-message-box__wrapper" style="z-index: 2011;">
          <div class="el-message-box">
           <!-- <div class="el-message-box__header">
              <div class="el-message-box__title">
                <span></span></div><button type="button" aria-label="Close" class="el-message-box__headerbtn"><i
                  class="el-message-box__close el-icon-close"></i></button>
            </div> -->
            <div class="el-message-box__content">
              <div class="el-message-box__container">
                <!---->
                <div class="el-message-box__message">
                  <p>


                   <el-input type="text" style="margin-bottom: 10px;"  autocomplete="off" placeholder="English Text" v-model="confirmModel.value" />
                   <el-input type="text" autocomplete="off" v-model="confirmModel.enVal"
                     placeholder="中文名" />
                  </p>
                </div>
              </div>
              <!-- <div class="el-message-box__input" style="display: none;">
                <div class="el-input">
                  <input type="text" autocomplete="off" placeholder="" class="el-input__inner">

                </div>
                <div class="el-message-box__errormsg" style="visibility: hidden;"></div>
              </div> -->
            </div>
            <div class="el-message-box__btns">
              <button  @click="onCanceln" type="button" class="el-button el-button--default el-button--small">
                <!---->
                <!----><span>
                  Cancel
                </span></button>
                <button type="button" @click="onConfirmFn" class="el-button el-button--default el-button--small el-button--primary ">
                <!---->
                <!----><span>
                  OK
                </span></button></div>
          </div>
        </div>
        <div class="v-modal" tabindex="0" style="z-index: 2002;" v-if='confirmModel.hide'></div>
  </div>
</template>
<script>
  import {
    getUserList,
    modifyAccountRate,
    getAccountList,
    getTypes,
    getBelongingTypes,
    addTypes,
    modifyTypes,
    delTypes
  } from '@/api/setting'
  let setting = {
    getUserList,
    getAccountList,
    getTypes,
    getBelongingTypes,
    addTypes,
    modifyTypes,
    delTypes
  }
  import RateCardEdit from './Account/edit'
  export default {
    filters: {
      userTypeName: (name, group) => {
        if (!name) {
          return '-'
        }
        let indStr = name.toLowerCase()
        let strInd = indStr.indexOf('doctor')
        let changeStr = group ? 'medical' : 'MEDICAL';
        return strInd > -1 ? name.substr(0, strInd) + changeStr + name.substr(strInd + changeStr.length) : name;
      }
    },
    data() {
      return {
        list: {},
        confirmModel: {
          value: '',
          enVal: ''
        },
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 25,
          keyword: '',
          sorting: '',
          column: '',
          importance: undefined,
          title: undefined,
          type: undefined,
          sort: '+id'
        },
        total: 20,

        activeName: 'User',
        isActiveName: 'User',
        TypesDopingTest: {
          value: '',
          list: []
        },
        TypesMedicalRecord: {
          value: '',
          list: []
        },
        TypesCompetition: {
          value: '',
          list: []
        },
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        medical: {
          belonging: 'MEDICAL',
          items: [{
              title: 'Types of Doping Test',
              typeCode: 'DOPING',
              value: '',
              list: []
            },
            {
              title: 'Types of Category(Sport Medicine)',
              typeCode: 'CATEGORY',
              value: '',
              list: []
            },
            {
              title: 'Types of Category(Sport Science)',
              typeCode: 'SCIENCE_CATEGORY',
              value: '',
              list: []
            },
            {
              title: 'Venue',
              typeCode: 'MEDICAL_VENUE',
              value: '',
              list: []
            },
          ]
        },
        training: {
          belonging: 'TRAINING',
          items: [
            // {
            //   title: 'Course Info',
            //   typeCode: 'COURSE_TYPE',
            //   value: '',
            //   list: []
            // },
            // {
            //   title: 'Course Status',
            //   typeCode: 'COURSE_STATUS',
            //   value: '',
            //   list: []
            // },
            {
              title: 'Venue',
              typeCode: 'VENUE',
              value: '',
              list: []
            },
            // {
            //   title: 'Attendance',
            //   typeCode: 'ATTENDANCE',
            //   value: '',
            //   list: []
            // },
            // {
            //   title: 'Course Details',
            //   typeCode: 'COURSE_DETALL',
            //   value: '',
            //   list: []
            // },
            {
              title: 'Session Suspend Reason',
              typeCode: 'SUSPEND_REASSON',
              value: '',
              list: []
            },
            {
              title: 'Unattended Reason',
              typeCode: 'ABSENT_REASSON',
              value: '',
              list: []
            },
            {
              title: 'Irregular Attendance Reason',
              typeCode: 'LEAVE_REASSON',
              value: '',
              list: []
            },


          ]
        },
        event: {
          belonging: 'EVENT',
          items: [
            // {
            //   title: 'Event Type',
            //   typeCode: 'EVENT_TYPE',
            //   value: '',
            //   list: []
            // },
            // {
            //   title: 'Category',
            //   typeCode: 'CATEGORY',
            //   value: '',
            //   list: []
            // },
            {
              title: 'Competiotion Level',
              typeCode: 'COMPETIOTION',
              value: '',
              enVal: '',
              en: true,
              list: []
            },
            {
              title: 'Award Type',
              typeCode: 'AWARD_TYPE',
              value: '',
              enVal: '',
              en: true,
              list: []
            },
            // {
            //   title: 'Event Country',
            //   typeCode: 'EVENT_COUNTRY',
            //   value: '',
            //   list: []
            // },
            {
              title: 'Class Type',
              typeCode: 'CLASS_TYPE',
              value: '',
              enVal: '',
              en: true,
              list: []
            },
            {
              title: 'Activities',
              typeCode: 'ACTIVITIES_EVENT',
              value: '',
              enVal: '',
              en: true,
              list: []

            }
          ]
        },
        miscellaneous: {
          belonging: 'MISCELLANEOUS',
          items: [{
              title: 'Sports Type',
              typeCode: 'SPORTS_TYPE',
              value: '',
              enVal: '',
              en: true,
              list: []
            },
            {
              title: 'Type of Disability',
              typeCode: 'DISABILITY',
              value: '',

              list: []
            },
            {
              title: 'Affecting Area',
              typeCode: 'AFFECTION',
              value: '',
              list: []
            },
            {
              title: 'Ambulatory',
              typeCode: 'AMBULATORY',
              value: '',
              list: []
            },
            {
              title: 'User Group',
              typeCode: 'USER_GROUP',
              value: '',
              list: []
            },
            {
              title: 'Rate Title',
              typeCode: 'RATE_TITLE',
              value: '',
              list: []
            },

             // {
             //   title: 'Resport Type',
             //   typeCode: 'RESPORT_TYPE',
             //   value: '',
             //   list: []
             // },
             // {
             //   title: 'Resport Type',
             //   typeCode: 'RESPOT_TYPE',
             //   value: '',
             //   list: []
             // },
             // {
             //   title: 'Resport Type',
             //   typeCode: 'RESPOT_TYPE',
             //   value: '',
             //   list: []
             // },
            // {
            //   title: 'Resport Type',
            //   typeCode: 'RESPORT_TYPE',
            //   value: '',
            //   list: []
            // },
            // {
            //   title: 'Resport Type',
            //   typeCode: 'RESPOT_TYPE',
            //   value: '',
            //   list: []
            // },
            // {
            //   title: 'Resport Type',
            //   typeCode: 'RESPOT_TYPE',
            //   value: '',
            //   list: []
            // },
          ]
        },
        isShow: false
      }
    },
    components: {
      RateCardEdit
    },
    watch: {
      $route: {
        handler: function(route) {
          if (route.params.page) {
            this.activeName = route.params.page
            this.isActiveName = route.params.page
          } else if (route.name.indexOf('RateCard') > -1) {
            this.activeName = 'Account'
            this.isActiveName = 'Account'
          }
        },
        immediate: true
      }
    },
    created() {
      this.route = this.$route

      if (this.route.params.page) {
        this.activeName = this.route.params.page
      }
      if (global.settingUser && global.settingUser.listQuery) {
        this.listQuery = global.settingUser.listQuery || this.listQuery
        this.list = global.settingUser.list || this.list
      }
      this.fetchData()
    },
    methods: {
      toggleStatusFn(row) {
        this.IsNotStatus(row, this.$set)
        var {
          status,
          id,
          uts
        } = row

        modifyAccountRate({
          status,
          id,
          uts
        })
      },
      sort_change(column) {
        //  id,name,notes,status,cts
        this.listQuery.page = 1
        if (column.prop && column.order) {
          this.listQuery.sorting = column.order === 'ascending' ? 0 : 1
          this.listQuery.column = column.prop
          if (this.activeName === 'User') {
            this.getUserList(1)
          } else if (this.activeName === 'Account') {
            this.getUserList(1)

          }
        }
        // this.showed_data = this.filtered_data.slice(0, this.page_size) // show only one page
      },
      handleClick(tab, event) {
        if (this.isActiveName !== tab.name) {
          if (tab.name !== 'Account' && this.$route.name.indexOf('RateCard') <= -1) {
            this.fetchData(1)
          } else {
            if (this.$route.name.indexOf('RateCard') > -1) {
              this.$router.push({
                name: 'Setting',
                params: {
                  page: tab.name
                }
              })
            } else if (this.isActiveName === 'Account') {
              this.$router.push({
                name: 'RateCard',
                params: {
                  page: tab.name
                }
              })
            } else {
              this.$router.push({
                name: 'RateCard',
                params: {
                  page: tab.name
                }
              })
            }
          }


        }
        this.isActiveName = tab.name
      },
      handleFilter() {
        this.fetchData(1)
      },
      fetchData(page) {
        if (this.activeName === 'User' || (this.activeName == 'Account' && this.$route.name !== 'RateCardEdit')) {
          this.getUserList(page || this.listQuery.page)
        }
        if (this.activeName === 'Medical' || this.activeName === 'Training' || this.activeName === 'Event' || this.activeName ===
          'Miscellaneous') {
          // eslint-disable-next-line no-unused-vars,no-undef,no-empty
          const belonging = this.activeName.toUpperCase()
          const typesList = this.typesList(belonging)
          getBelongingTypes({
            belonging: belonging
          }).then(response => {
            const data = response.result
            for (var i in data) {
              for (var ii in typesList) {
                if (typesList[ii].typeCode === i) {
                  typesList[ii].list = data[i]
                }
              }
            }
          })
        }
      },
      addTypes(belonging, typeCode, typeName, typeNameTc) {
        debugger
        if (typeName === '' || typeNameTc === '') {
          this.$message({
            type: 'error',
            message: 'Please enter a type of '+(!typeName?'English':'Chinese')+' name!'
          })
          return false
        }
        console.log(belonging, typeCode, typeName, typeNameTc)
        this.openLoading(true)
        addTypes({
          typeCode: typeCode,
          typeName: typeName,
          typeNameTc,
          belonging: belonging
        }).then(response => {
          const data = response.result
          const typesList = this.typesList(belonging.toUpperCase())
          console.log(typesList)
          for (var i in typesList) {
            if (typesList[i].typeCode === data.typeCode) {
              typesList[i].list.push(data)
              typesList[i].value = ''
             typeNameTc?typesList[i].enVal = '':"";
            }
          }
          this.openLoading(false)
        })
      },
      typesList(belonging) {
        let typesList = ''
        if (belonging === 'MEDICAL') {
          typesList = this.medical.items
        }
        if (belonging === 'TRAINING') {
          typesList = this.training.items
        }
        if (belonging === 'EVENT') {
          typesList = this.event.items
        }
        if (belonging === 'MISCELLANEOUS') {
          typesList = this.miscellaneous.items
        }
        return typesList
      },
      delTypes(id, name) {
        this.$confirm('You determine the deletion “' + name + '” type?', 'Tips', {
          confirmButtonText: 'Yes',
          cancelButtonText: 'No',
          type: 'warning'
        }).then(() => {
          delTypes({
            id: id
          }).then(response => {
            this.fetchData()
          })
        }).catch(() => {
          // this.$message({
          //     type: 'info',
          //     message: 'Delete'
          // })
        })
      },
      onCanceln(){
       this.confirmModel.hide = false
      },
      onConfirmFn(){
        var { id, name, typeCode, belonging,typeNameTc} = this.ConfirmVal

       this._onConfirmFn(id, this.confirmModel.value, typeCode, belonging,this.confirmModel.enVal)
      },
      _onConfirmFn(id, name, typeCode, belonging,typeNameTc){

        modifyTypes({
          id: id,
          belonging: belonging,
          typeCode: typeCode,
          typeName: name,
          typeNameTc
        }).then(response => {
           this.confirmModel.hide = false
          this.fetchData()
        })
      },
      editTypes(id, name, typeCode, belonging, typeNameTc,item) {
        let value = this.confirmModel.value
          debugger
        if (item.en) {

          debugger
          this.$set(this.confirmModel, 'value', name)
          this.$set(this.confirmModel, 'enVal', typeNameTc)
          this.$set(this.confirmModel, 'hide', true)
          this.ConfirmVal ={ id, name, typeCode, belonging,typeNameTc}
        } else {
          this.$prompt('', '', {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            inputValue: name
          }).then(({
            value
          }) => {
            this._onConfirmFn(id, value, typeCode, belonging)
          }).catch(() => {

          })
        }

      },

      getUserList(page) {
        this.listLoading = true;

        setting['get' + this.activeName + 'List']({
          page: page,
          size: this.listQuery.limit,
          keyword: this.listQuery.keyword,
          sorting: this.listQuery.sorting,
          column: this.listQuery.column
        }).then(response => {
          const data = response.result
          if (!data.total && data.total === undefined) {
            data.total = this.list.total
          }
          this.listQuery.page = page
          this.list = data
          this.listLoading = false
        })
      },
      handleSizeChange(val) {
        this.listQuery.limit = val
        this.getUserList(this.listLoading.page)
      },
      // pageNum变化事件
      handleCurrentChange(page) {
        this.getUserList(page)
      },
      openLoading(type, text) {
        const loading = this.$loading()
        if (type) {
          this.$loading({
            lock: true,
            text: text || 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0)'
          })
          setTimeout(function() {
            loading.close()
          }, 10000)
        } else {
          setTimeout(() => {
            loading.close()
          }, 500)
        }
      }
    },
    beforeRouteLeave(to, from, next) {
      console.log(to.name, global)
      if (to.name === 'User' || to.name === 'userInfo') {
        global.settingUser = {
          listQuery: this.listQuery,
          list: this.list
        }
      } else {
        global.settingUser = ''
      }
      next()
    }
  }
</script>
<style lang="scss">
  body {
    .lfRiBefore {

      position: relative;

      &::after {
        content: '';
        display: inline-block;
        position: absolute;
        right: 50%;
        top: 8px;
        height: 24px;
        width: 1.5px;
        background: #ededed;

      }
    }

    .tabs__content_team {
      padding-left: 0;
      padding-right: 0;

      >div {
        padding-left: 20px;
        padding-right: 20px;
      }

      .el-tabs__content {
        height: calc(100vh - 204px);
        overflow-y: auto;
      }
    }
  }
</style>
